<template>
</template>

<script setup>
import {  onMounted, inject, onBeforeUnmount } from "vue";
import { DrawLine, DrawRect, DrawCircle, DrawPolygon} from '@antv/l7-draw';
const { map, scene } = inject("mapScene");
import { useRoute, onBeforeRouteUpdate } from "vue-router";
let route = useRoute()
let draw
onMounted(async () => {
    map.flyTo({
        center: [114.406325, 30.465113],
        zoom: 15,
        pitch: 45,
        rotate: 30
    });
    let type = route.params.type;
    initDraw(type)
});
function initDraw(type) {
    if (draw) {
        draw.destroy();
        draw.clear();
        draw = null;
    }
    switch (type) {
        case 'line':
            // 实例化线绘制工具
            draw = new DrawLine(scene, {
                distanceOptions: {},
            });
            break;
        case 'rect':
            // 实例化矩形绘制工具
            draw = new DrawRect(scene, {
                areaOptions: {},
            });
            break;

        case 'polygon':
            // 实例化多边形绘制工具
            draw = new DrawPolygon(scene, {
                areaOptions: {},
            });
            break;
        case 'circle':
            // 实例化圆形绘制工具
            draw = new DrawCircle(scene, {
                areaOptions: {},
            });
            break;
    }
    draw.enable();
}
//路由更换参数更新,使用导航守卫
onBeforeRouteUpdate((to) => {
    //to表示去到路由页面信息
    let type = to.params.type;
    initDraw(type);
})
onBeforeUnmount(() => {
    if (draw) {
        draw.destroy();
        draw.clear();
        draw = null;
    }
});
</script>

<style lang="scss" scoped>
.btns {
    position: fixed;
    left: 1840px;
    top: 200px;
}
</style>